<template>
  <el-container>
    <!-- 产品序列导航栏 -->
    <el-aside width="150px">
      <span>产品型号</span>
      <el-button-group class="ml-4">
        <el-button text @click="toProductType" style="width: 10px">
          <el-icon :size="15">
            <Edit />
          </el-icon>
        </el-button>
        <el-button text @click="loadData" style="width: 10px">
          <el-icon :size="15">
            <Refresh />
          </el-icon>
        </el-button>
      </el-button-group>
      <el-menu :default-active="activeIndex.toString()" style="overflow-y: auto; height: 350px;" @select="handleSelect">
        <el-menu-item-group>
          <template slot="title">产品型号</template>
          <el-menu-item v-for="(item, index) in menuGroups" :key="index" :index="item.productTypeId.toString()"
            @click="fetchTableData(item.productTypeId)">
            {{ item.productTypeCode }}
          </el-menu-item>
        </el-menu-item-group>
      </el-menu>
    </el-aside>
    <el-main>
      <!-- 搜索 -->
      <el-form :model="searchForm" label-width="80px" class="mb-3" size="small">
        <el-row :gutter="20">
          <el-col :span="6" :offset="0">
            <el-form-item label="整机序列号" v-if="isOESource">
              <el-input v-model="searchForm.oeSerialNo" placeholder="整机序列号" clearable></el-input>
            </el-form-item>
            <el-form-item label="产品序列号" v-if="isProductSource">
              <el-input v-model="searchForm.productSn" placeholder="产品序列号" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="产品状态">
              <el-select v-model="searchForm.productStatus" filterable placeholder="请选择产品状态">
                <el-option v-for="item in productStatusDic" :key="item.key" :label="item.value"
                  :value="item.key"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <div class="flex items-center justify-end">
              <el-button type="primary" @click="initTableData">搜索</el-button>
              <el-button @click="resetSearchForm">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <!--按钮组-->
      <div class="flex items-center justify-between mb-4">
        <div>
          <el-button type="primary" size="small" @click="openDialog">新增</el-button>
          <el-button type="primary" size="small" @click="handleDelete">删除</el-button>
          <el-button type="primary" size="small" @click="batchImport">导入</el-button>
          <el-button type="primary" size="small" @click="batchExport">导出</el-button>
        </div>
        <el-tooltip effect="dark" content="刷新数据" placement="top">
          <el-button text @click="initTableData">
            <el-icon :size="20">
              <Refresh />
            </el-icon>
          </el-button>
        </el-tooltip>
      </div>
      <el-dialog :title="drawerTitle" v-model="dialogTableVisible" width="60%" align-center>
        <el-form :model="form" ref="formRef" :rules="rules" class="form-inline" :inline="false">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="产品型号" prop="productTypeId">
                <el-select placeholder="请选择产品型号" v-model="form.productTypeId">
                  <el-option v-for="(item, index) in menuGroups" :key="index" :label="item.productTypeCode"
                    :value="item.productTypeId">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="整机序列号" prop="oeSerialNo">
                <el-input v-model="form.oeSerialNo" placeholder="整机序列号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="ERP" prop="erpNo">
                <el-input v-model="form.erpNo" placeholder="项目编码/ERP"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="买方" prop="customerId">
                <el-button @click="dialogTableVisible_company = true">
                  {{
                  checkedCustomer == null ? "选择买方" : checkedCustomer.name
                  }}
                </el-button>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="终端客户" prop="supplierId">
                <el-button @click="dialogTableVisible_supplier = true">
                  {{
                  checkedSupplier == null ? "选择终端客户" : checkedSupplier.name
                  }}
                </el-button>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="软件版本" prop="softwareVersion">
                <el-input v-model="form.softwareVersion" placeholder="软件版本"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="发货日期">
                <el-date-picker v-model="form.deliveryDate" type="datetime" placeholder="选择日期"
                  format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="完工日期">
                <el-date-picker v-model="form.completionDate" type="datetime" placeholder="选择日期"
                  format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="交船日期">
                <el-date-picker v-model="form.shipDeliveryDate" type="datetime" placeholder="选择日期"
                  format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="质保截至日期">
                <el-date-picker v-model="form.warrantyEndDate" type="datetime" placeholder="选择日期"
                  format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="质保条款">
                <el-radio-group v-model="form.warrantyType" @change="handleRadioChange">
                  <el-radio value="交船后">交船后</el-radio>
                  <el-radio value="发货后">发货后</el-radio>
                </el-radio-group>
                <template v-if="form.warrantyType">
                  <el-input v-model="form.warrantyMonths" placeholder="请输入月份" @input="handleWarrantyTypeChange"
                    style="width: 100px; margin-left: 10px;"></el-input>
                  <span style="margin-left: 10px;">个月</span>
                </template>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogTableVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitForm">确 定</el-button>
          </span>
        </template>
      </el-dialog>
      <!-- 选择买方dialog -->
      <SystemDialog title="选择买方" :visible="dialogTableVisible_company" :height="60" :width="70"
        @on-close="dialogTableVisible_company = false" @on-confirm="dialogTableVisible_company = false"
        :showCloseBtn="true" :showOkBtn="true" okBtnName="确认" cancelBtnName="取消">
        <template v-slot:content>
          <SelectCompany v-if="dialogTableVisible_company" :selectedCompanyId="form.customerId"
            @getCheckedCompany="getCheckedCompany" :showSelection="true" />
        </template>
      </SystemDialog>
      <SystemDialog title="选择终端客户" :visible="dialogTableVisible_supplier" :height="60" :width="70"
        @on-close="dialogTableVisible_supplier = false" @on-confirm="dialogTableVisible_supplier = false"
        :showCloseBtn="true" :showOkBtn="true" okBtnName="确认" cancelBtnName="取消">
        <template v-slot:content>
          <SelectCompany v-if="dialogTableVisible_supplier" :selectedCompanyId="form.supplierId"
            @getCheckedCompany="getCheckedSupplier" :showSelection="true" />
        </template>
      </SystemDialog>
      <SystemDialog title="设备维修记录" :visible="dialogTableVisible_maintenance" :height="40" :width="50"
        @on-close="dialogTableVisible_maintenance = false" @on-confirm="dialogTableVisible_maintenance = false"
        :showCloseBtn="true" :showOkBtn="true" okBtnName="确认" cancelBtnName="取消">
        <template v-slot:content>
          <el-table :data="maintenanceStatsData" style="width: 100%">
            <el-table-column label="保内修理次数" align="center">
              <template #default="{ row }">
                {{ row.warrantyCount }}
              </template>
            </el-table-column>
            <el-table-column label="备件更换次数" align="center">
              <template #default="{ row }">
                {{ row.outOfWarrantyCount }}
              </template>
            </el-table-column>
            <el-table-column label="保外修理次数" align="center">
              <template #default="{ row }">
                {{ row.changePartCount }}
              </template>
            </el-table-column>
            <el-table-column label="最后维修时间" align="center">
              <template #default="{ row }">
                {{ row.lastMaintenanceDate }}
              </template>
            </el-table-column>
          </el-table>
        </template>
      </SystemDialog>
      <el-dialog v-model="batchformDrawer" title="批量产品入库" align-center>
        <el-form :model="ruleForm" label-width="120px" :inline="false">
          <el-form-item label="模板下载：">
            <el-link type="primary" :underline="false" @click="downloadTemplate">批量产品上传模板下载</el-link>
          </el-form-item>
          <!-- 添加文件上传组件 -->
          <el-form-item label="上传附件：" prop="files">
            <el-upload class="hide" action="" accept=".xlsx,.xls" :multiple="true" :on-change="handleChange" :on-remove="handleRemove"
              :file-list="ruleForm.fileList" :http-request="handleUpload" :auto-upload="true">
              <el-button slot="trigger" type="primary" plain>上传文件</el-button>
            </el-upload>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit" style="width: 35%">开始导入</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <!-- 表格数据 -->
      <el-table :data="tableData" :default-sort="[{ prop: 'deliveryDate', order: 'descending' }, { prop: 'shipDeliveryDate', order: 'descending' }]" stripe
        style="width: 100%" height="300" v-loading="loading" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="30"> </el-table-column>
        <!-- <el-table-column label="产品型号" align="center">
          <template #default="{ row }">
            {{ row.productTypeCode }}
          </template>
        </el-table-column> -->
        <el-table-column label="整机序列号" width="140" align="center" show-overflow-tooltip>
          <template #default="{ row }">
            {{ row.oeSerialNo }}
          </template>
        </el-table-column>
        <el-table-column label="项目编码/ERP" width="140" align="center" show-overflow-tooltip>
          <template #default="{ row }">
            {{ row.erpNo }}
          </template>
        </el-table-column>
        <!-- <el-table-column label="产品序列号" align="center" v-if="isProductSource" show-overflow-tooltip>
          <template #default="{ row }">
            {{ row.productSn }}
          </template>
        </el-table-column> -->
        <el-table-column label="产品状态" align="center" show-overflow-tooltip>
          <template #default="{ row }">
            {{ transferProductStatus(row.warrantyEndDate) }}
          </template>
        </el-table-column>
        <el-table-column label="软件版本" align="center" show-overflow-tooltip>
          <template #default="{ row }">
            {{ row.softwareVersion }}
          </template>
        </el-table-column>
        <el-table-column label="发货日期" width="110" align="center" prop="deliveryDate" sortable show-overflow-tooltip>
          <template #default="{ row }">
            {{ dateFormatterDay(row.deliveryDate) }}
          </template>
        </el-table-column>
        <el-table-column label="交船日期" width="110" align="center" prop="shipDeliveryDate" sortable show-overflow-tooltip>
          <template #default="{ row }">
            {{ dateFormatterDay(row.shipDeliveryDate) }}
          </template>
        </el-table-column>
        <el-table-column label="质保截至日期" width="110" align="center" show-overflow-tooltip>
          <template #default="{ row }">
            {{ dateFormatterDay(row.warrantyEndDate) }}
          </template>
        </el-table-column>
        <el-table-column label="终端客户" align="center" show-overflow-tooltip>
          <template #default="{ row }">
            {{ row.supplierName }}
          </template>
        </el-table-column>
        <el-table-column label="船舶名称" align="center" show-overflow-tooltip>
          <template #default="{ row }">
            {{ row.shipName }}
          </template>
        </el-table-column>
        <el-table-column label="最后维修时间" width="110" align="center" show-overflow-tooltip>
          <template #default="{ row }">
            {{ dateFormatterDay(row.lastMaintenanceDate) }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="110">
          <template #default="scope">
            <el-dropdown type="primary" split-button size="small" @command="handleCommand">
              更多
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item :command="{ action: 'showHandleEdit', row: scope.row }">修改</el-dropdown-item>
                  <el-dropdown-item :command="{ action: 'showDeleteProductInfo', row: scope.row }">删除</el-dropdown-item>
                  <el-dropdown-item :command="{ action: 'showPartList', row: scope.row }">部件列表</el-dropdown-item>
                  <!-- <el-dropdown-item
                      :command="{ action: 'showMaintenanceStats', row: scope.row }">维修统计</el-dropdown-item> -->

                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </el-table-column>

      </el-table>
      <!-- 分页组件 -->
      <div class="flex items-center justify-center mt-5">
        <el-pagination background layout="prev, pager ,next" :total="total" :current-page="currentPage"
          :page-size="limit" @current-change="initTableData" />
      </div>
      <div style="display: flex; align-items: center"></div>
    </el-main>
  </el-container>
</template>

<script setup>
import { ref, reactive,watch,computed, onMounted,onBeforeUnmount} from "vue";
import SystemDialog from "~/components/SystemDialog.vue";
import SelectCompany from "~/components/select-company.vue";
import { useRouter } from "vue-router";
import { Edit } from "@element-plus/icons-vue";
import {toast} from "~/composables/util"
import { dateFormatterDay,dateFormatter,addMonthsAndFormat } from '~/utils/common.js';
import { getProductTypeByType,addProduct,deleteProduct,updateProduct,getProductList,uploadFile,batchCreateProduct } from "~/api/productApi"

// 路由
const router = useRouter();
const dialogTableVisible = ref(false);
const dialogTableVisible_maintenance = ref(false);
const maintenanceStatsData = ref([]);
const menuGroups = ref([]);
const loading = ref(false)
  //是否是编辑弹窗
const editId = ref(0)
const drawerTitle = ref(null)
const filesInfo = ref([])
const ruleForm = reactive({
  fileList: [],
})

  // 分页
const currentPage = ref(1)
const total = ref(0)
const limit = ref(10)

// 搜索栏查询条件
const searchForm = reactive({
  oeSerialNo: "",
  productStatus: "",
  factory:"",
  productTypeId : "",
  page: currentPage.value,
  size: limit.value,
});

const props = defineProps({
  source: {
    type: String,
    required: true
  }
});

const isProductSource = computed(() => props.source === 'WG' || props.source === 'OEM');
const isOESource = computed(() => props.source === 'HLD');
const activeIndex = ref(2);

const loadData = () => {
  //获取产品类别树
  getProductTypeTree(props.source);
  //获取表格数据
  // fetchTableData("",props.source);
  initTableData();
};

const getProductTypeTree = (source) => {
  getProductTypeByType(source).then(res => {
       menuGroups.value = res;
  });
}


const fetchTableData = (productTypeId,source) => {
  const params = {
    productTypeId: productTypeId,
    factory: source
      };
      getProductList(params).then(res => {
          if(res){
            tableData.value = res.records      
            total.value = res.total
          }else{
            tableData.value = []  
            total.value = 0
          }
      })
      .finally(() => {
        loading.value = false
      })
};

const handleSelect = (index) => {
  activeIndex.value = index;
}


//跳转到产品序列管理页面
const toProductType = () => {
  router.push("/productType");
};
// 获取数据
function initTableData(p = null) {
  console.log("initTableData");
  //指定页码是否为空
  if (typeof p == "number") {
      currentPage.value = p
    }
  
    loading.value = true
    searchForm.page = currentPage.value
    searchForm.factory = props.source
    searchForm.productTypeId = searchForm.productTypeId || ""
    getProductList(searchForm)
      .then(res => {
          if(res){
            tableData.value = res.records      
            total.value = res.total
          }else{
            tableData.value = []  
            total.value = 0
          }
      })
      .finally(() => {
        loading.value = false
      })
}


// 重置搜索框
const resetSearchForm = () => {
  searchForm.oeSerialNo = "";
  searchForm.productStatus = "";
  searchForm.factory = "";
  searchForm.productTypeId = "";
  initTableData(1);
};
// 产品状态字典数据 0保内 1保外
const productStatusDic = ref([
  { key: 0, value: "保内" },
  { key: 1, value: "保外" },
]);

const transferProductStatus = (warrantyEndDate) => {
  if(warrantyEndDate && new Date(warrantyEndDate) < new Date()){
    return "保外";
  }else{
    return "保内"
}};

//按钮组
//打开新增弹窗
const openDialog = () => {
  drawerTitle.value = "新增产品"
  //修改标记置为0
  editId.value = 0
  checkedSupplier.value = null
  checkedCustomer.value = null
  resetForm({
      oeSerialNo: "",
      productSn: "",
      softwareVersion: "",
      supplierId: "",
      customerId:"",
      deliveryDate: "",
      completionDate: "",
      deliveryDate: "",
      warrantyEndDate: "",
      warrantyTerms: "",
      productTypeId: "",
      factory: "",
      shipDeliveryDate: "",
      erpNo:"",
      warrantyMonths: "",
      warrantyType: "",
    });
  dialogTableVisible.value = true;
};

const formRef = ref(null);
const form = reactive({
  oeSerialNo: "",
  softwareVersion: "",
  supplierId: "",
  customerId:"",
  deliveryDate: "",
  completionDate: "",
  deliveryDate: "",
  warrantyEndDate: "",
  warrantyTerms: "",
  productTypeId: "",
  factory: "",
  shipDeliveryDate: "",
  erpNo:"",
  warrantyMonths: "",
  warrantyType: "",
});

//获取选择的公司
function getCheckedCompany(data) {
  if (data != null) {
    form.customerId = data.id
    checkedCustomer.value = data;
  }
}

//获取选择的公司
function getCheckedSupplier(data) {
  if (data != null) {
    form.supplierId = data.id
    checkedSupplier.value = data;
  }
}

const handleRadioChange = () => {
  if (form.warrantyMonths) {
    form.warrantyMonths = "";
    form.warrantyEndDate = "";
  }
};

const handleWarrantyTypeChange = () => {
  const monthsToAdd = parseInt(form.warrantyMonths, 10);
  if (form.warrantyType === '发货后' && form.deliveryDate) {
    const warrantyEndDate = addMonthsAndFormat(form.deliveryDate, monthsToAdd);
    form.warrantyEndDate = warrantyEndDate;
  } else if (form.warrantyType === '交船后' && form.shipDeliveryDate) {
    const warrantyEndDate = addMonthsAndFormat(form.shipDeliveryDate, monthsToAdd);
    form.warrantyEndDate = warrantyEndDate;
  }
};

//执行表单校验
const rules = {
  productTypeId: [
    { required: true, message: '产品型号不能为空', trigger: 'change' }
    ],
};
// 表单提交
const submitForm = () => {
  formRef.value.validate((valid) => {
      if (!valid) return
      if (form.warrantyType && form.warrantyMonths) {
          form.warrantyTerms = `${form.warrantyType}${form.warrantyMonths}个月`;
        }
      //根据是否是修改标记，判断执行新增接口还是修改接口
      const fun = editId.value ? updateProduct(editId.value, form) : addProduct(form)  
      fun.then(res => {
        toast(drawerTitle.value + "成功")
        // 修改刷新当前页，新增刷新第一页
        initTableData(editId.value ? false : 1)
        dialogTableVisible.value = false; // 关闭弹窗
      }).catch(err => {
      toast("提交失败", err);
      });
    });
};

  // 重置表单
  function resetForm(row = false) {
  if (formRef.value) formRef.value.resetFields();
  if (row) {
    for (const key in form) {
      // 如果是时间字段，去掉 .000 +00:00
      if (key.includes("Date") && row[key]) {
        form[key] = row[key].replace("T", " ").replace(".000+00:00", "");
      } else {
        form[key] = row[key];
      }
    }
  }
}


// 批量导入
const batchformDrawer = ref(false)
// 批量上传按钮点击事件
const batchImport = () => {
  //修改标记置为0
  editId.value = 0
  ruleForm.fileList = [];
  filesInfo.value = [];
  //打开弹窗
  batchformDrawer.value = true
}

//文件状态改变
const handleChange = (file, fileList) => {
    form.files = fileList;
}

const handleRemove = (file, fileList) => {
    filesInfo.value =filesInfo.value.filter(bo => bo.name !== file.name);
}

//上传文件
const handleUpload = (param) => {
    const File = param.file;
    let paramIo = new FormData();
    paramIo.append("file", File);
    uploadFile(paramIo).then((res) => {
      if(res.length > 0){
        filesInfo.value.push(res[0]);
      }
    });
} 

const downloadTemplate = () => {
  window.location.href = "batchCreateTemplate.xlsx"

};

// 批量导入
const onSubmit = () => {
  if(filesInfo.value.length > 0){
    batchCreateProduct(JSON.stringify(filesInfo.value)).then(res => {
      toast("文件处理成功");
      // 关闭弹窗
      batchformDrawer.value = false;
      loadData();
    })
  }else{
    toastWarn("请选择文件");
  }
}
//批量导出
const batchExport = () => {
  console.log("batchExport");
};

// 删除单个产品
const deleteProductInfo = (id) => {
  loading.value = true
  deleteProduct(id).then(res => {
    toast("删除成功")
    initTableData()
  })
    .finally(() => {
      loading.value = false
    })
}

//选择公司弹窗
const dialogTableVisible_company = ref(false);
const dialogTableVisible_supplier = ref(false);
const checkedCustomer = ref(null);
const checkedSupplier = ref(null);

// 表格数据
const tableData = ref([]);
const selectedRows = ref([]);
//多选框选择
const handleSelectionChange = (rows) => {
  selectedRows.value = rows;
};
// 编辑按钮
function handleEdit(row) {
  drawerTitle.value = "修改产品";
  editId.value = row.productId;
    //给公司信息赋值回显
    if (null == row.supplierId) {
      checkedSupplier.value = null
    } else {
      checkedSupplier.value = { id: row.supplierId, name: row.supplierName }
    }
    if(null == row.customerId){
      checkedCustomer.value = null
    }else{
      checkedCustomer.value = { id: row.customerId, name: row.customerName }
    }
  resetForm(row);
  dialogTableVisible.value = true;
}
// 删除按钮
const deleteDevice = (index, row) => {
  ElMessageBox.confirm("此操作将永久删除该产品, 是否继续?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      tableData.value.splice(index, 1);
      ElMessage({
        type: "success",
        message: "删除成功!",
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消删除",
      });
    });
};

// 批量删除
const handleDelete = () => {
  if (selectedRows.value.length === 0) {
    toastWarn("请选择要删除的产品");
    return;
  }

  const ids = selectedRows.value.map(row => row.productId);
  console.log(ids);
  loading.value = true;
  deleteProduct(ids)
    .then(res => {
      toast("删除成功");
      initTableData();
    })
    .catch(err => {
      console.error("删除失败", err);
    })
    .finally(() => {
      loading.value = false;
    });
};

// 监听 source 的变化
watch(() =>form.productTypeId, (newVal) => {
    const selectedItem = menuGroups.value.find(item => item.productTypeId === newVal);
    if (selectedItem) {
      form.factory = selectedItem.factory; // 将 factory 赋值给表单
    }
  });

const handleCommand = (command) => {
  if (command.action === "showPartList") {
    // 显示备件列表的逻辑
    console.log("显示备件列表", command.row.productId);
    localStorage.setItem('productData', JSON.stringify(command.row));
    router.push({
      path: '/spareParts', 
    });
  } else if (command.action === "showMaintenanceStats") {
    // 显示维修统计的逻辑
    console.log("显示维修统计", command.index, command.row);
    getMaintenanceStatsData();
    dialogTableVisible_maintenance.value = true;
  }else if (command.action === "showHandleEdit") {
    // 显示编辑弹窗的逻辑
    console.log("显示编辑弹窗", command.row);
    handleEdit(command.row);
  } else if (command.action === "showDeleteProductInfo") {
    // 显示删除弹窗的逻辑
    console.log("显示删除弹窗", command.row);
    deleteProductInfo(command.row.productId);
  }
};
// 获取维修统计数据
const getMaintenanceStatsData = () => {
  maintenanceStatsData.value = [
    {
      warrantyCount: 10,
      outOfWarrantyCount: 5,
      changePartCount: 2,
      lastMaintenanceDate: "2022-01-01",
    },
    {
      warrantyCount: 15,
      outOfWarrantyCount: 10,
      changePartCount: 3,
      lastMaintenanceDate: "2022-02-01",
    },
    {
      warrantyCount: 20,
      outOfWarrantyCount: 15,
      changePartCount: 4,
      lastMaintenanceDate: "2022-03-01",
    },
  ];
};


onMounted(() => {
  if (localStorage.getItem('productSourceTab')) {
    const tempForm = JSON.parse(localStorage.getItem('productSourceTab'));
    Object.assign(searchForm, tempForm);
  }
      // 初始化加载数据
    loadData();
})

onBeforeUnmount(() => {
  localStorage.setItem('productSourceTab', JSON.stringify(searchForm));
})


</script>
<style scoped>
.form-inline .el-input {
  --el-input-width: 150px;
}

.form-inline .el-select {
  --el-select-width: 150px;
}

.operation-buttons {
  display: flex;
  justify-content: space-between;
}

.operation-buttons .el-button {
  padding-left: 0;
  padding-right: 5px;
  margin-right: 0;
  /* 调整按钮之间的间距 */
  width: inherit;
}

.operation-buttons .el-dropdown {
  padding-left: 0;
  padding-right: 5px;
  margin-right: 0;
  /* 调整按钮之间的间距 */
  width: inherit;
}
</style>